<template>
  <div>
    <div class="con">
      <div class="title">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>账户信息</span>
        </p>
      </div>
      <div class="query">
        <el-form ref="queryParamsRef" inline :model="queryParams" label-width="90px">
          <el-form-item label="起始日期" props="startTime">
            <el-date-picker
              v-model="queryParams.params.startTime"
              type="date"
              placeholder="请选择起始日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="结束日期" props="endTime">
            <el-date-picker
              v-model="queryParams.params.endTime"
              type="date"
              placeholder="请选择结束时间"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySearch"> 查询 </el-button>
            <el-button type="primary" plain @click="resetQuery">重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="price">
        <div class="price_item">
          <div class="item_label">付款总额</div>
          <div class="item_value">{{ countInfo.consumption || 0 }}元</div>
        </div>
        <div class="price_item">
          <div class="item_label">消费总额</div>
          <div class="item_value">{{ countInfo.all || 0 }}元</div>
        </div>
      </div>
      <div class="title">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>服务概要</span>
        </p>
      </div>
      <el-table border :data="dataList" header-cell-class-name="title-style">
        <el-table-column prop="sn" label="单号" align="center" />
        <el-table-column prop="carEnums" label="类型" align="center">
          <template #default="scope">
            <span v-if="scope.row.paymentMethod === 'PLATFORM_DECREASE'" >{{ scope.row.productTypeName }}</span>
            <span v-if="scope.row.paymentMethod === 'PLATFORM_INCREASE'" >{{ '充值' }}</span>
            <span v-esle>{{ getEnumsLabel(scope.row.shoppingCarEnums) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="支付日期" align="center" />
        <el-table-column label="流水类型" align="center">
          <template #default="scope">
            {{ getTypeLabel(scope.row.paymentMethod) }}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="金额(元)" align="center" />
      </el-table>
      <div class="page-footer">
        <el-pagination
          :total="total"
          v-model:current-page="queryParams.params.pageNum"
          v-model:page-size="queryParams.params.pageSize"
          layout="total, prev, pager, next"
          small
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { walletLogList, walletCountList } from "@/api/control/order";
import { ElMessage } from 'element-plus'

const queryParams = ref<any>({
  params: {
    pageNum: 1,
    pageSize: 10,
    startTime: "",
    endTime: "",
  },
});
const total = ref(0); // 总条数
const dataList = ref<any>([]); // 数据列表
const typeList = ref<any>([
  { value: "CLOUD_SERVER", label: "云服务器" },
  { value: "CLOUD_MARKET", label: "云市场" },
  { value: "GOV_CLOUD", label: "政务云" },
  { value: "CLOUD_SERVER_RENEW", label: "云服务器续费" },
  { value: "CLOUD_SERVER_CHANGE", label: "云服务器变更" },
  { value: "RECHARGE", label: "充值" }
]);
const paymentMethodList = ref<any>([
  { value: "WALLET", label: "余额支付" },
  { value: "REFUND", label: "退款" },
  { value: "ACCOUNT", label: "对公账户支付" },
  { value: "WECHAT", label: "微信充值" },
  { value: "ALIPAY", label: "支付宝充值" },
  { value: "PLATFORM_DECREASE", label: "平台扣减" },
  { value: "PLATFORM_INCREASE", label: "平台充值" },
]);
const countInfo = ref({
  all: 0,
  consumption: 0,
});

onMounted(() => {
  getCount();
  getList();
});

// 获取数据列表
const getList = () => {
  walletLogList(queryParams.value).then((res: any) => {
    dataList.value = res.rows;
    total.value = res.total;
  });
};

// 统计财务金额信息
const getCount = () => {
  walletCountList().then((res: any) => {
    countInfo.value = res.data;
  });
};

// 搜索
const querySearch = () => {
  if (!queryParams.value.params.endTime || !queryParams.value.params.startTime) {
    return ElMessage.error('请选择起始日期和结束日期')
  }
  queryParams.value.params.pageNum = 1;
  queryParams.value.params.endTime = queryParams.value.params.endTime + ' 24:00';
  queryParams.value.params.startTime = queryParams.value.params.startTime + ' 00:00';
  getList();
};

// 重置
const resetQuery = () => {
  queryParams.value.params.startTime = "";
  queryParams.value.params.endTime = "";
  queryParams.value.params.pageNum = 1;
  getList();
};

// 获取类型中文名称
const getEnumsLabel = (val: any) => {
  let row = typeList.value.find((i: any) => i.value == val);
  return row ? row.label : "";
};

// 获取财务流水类型中文名称
const getTypeLabel = (val: any) => {
  let row = paymentMethodList.value.find((i: any) => i.value == val);
  return row? row.label : "";
};
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  height: auto;
  .con-title {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    span:nth-child(1) {
      display: flex;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
      }
    }
    span:nth-child(2) {
      display: flex;
      align-items: center;
      margin-left: 10px;
      font-size: 16px;
    }
  }
  .query {
    width: 100%;
    height: 50px;
    margin: 20px 0;
    display: flex;
  }
  .page-footer {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
  .price {
    margin: 40px 0 30px;
    width: 100%;
    height: 100px;
    display: flex;
    .price_item {
      flex: 1;
      display: flex;
      .item_label {
        flex: 1;
        background: #f6faff;
        border: 1px solid #f2f2f2;
        border-right: none;
        color: #909090;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .item_value {
        flex: 3;
        border: 1px solid #f2f2f2;
        border-right: none;
        border-left: none;
        display: flex;
        padding-left: 20px;
        align-items: center;
      }
    }
  }
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
